<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分页</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <nav>
        <ul class="pagination pagination-lg">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </nav>
    <nav>
        <ul class="pagination pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </nav>
    <nav>
        <ul class="pagination pagination-sm">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </nav>
    <nav>
        <ul class="pager">
            <li><a href="#">下一页</a></li>
            <li><a href="#">上一页</a></li>
        </ul>
    </nav>
    <nav>
        <ul class="pager">
            <li class="previous disabled"><a href="#">&larr;向前</a></li>
            <li class="next"><a href="#">&rarr;向后</a></li>
        </ul>
    </nav>
    <nav class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span>上一页</a></li>
        <li class="next"><a href="#"><span aria-hidden="true">&rarr;</span>下一页</a></li>
    </nav>

    <div class="container">
        <nav>
            <ul class="pagination">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <span class="label label-default">default</span>
    <span class="label label-primary">primary</span>
    <span class="label label-success">success</span>
    <span class="label label-info">info</span>
    <span class="label label-warning">warning</span>

    <h3>这是一个主标题<span class="label label-success">描述</span></h3>
    <h3>这是一个主标题<span class="label label-default">描述</span></h3>
</body>
</html>